<template>
  <!-- 不需要根标签了 -->
  <!-- 静态样式 -->
  <h1 class="title" style="font-size: 50px; font-weight: 700">hello vue3</h1>
  <!-- 动态样式 -->
  <p
    :class="{
      // true保留样式，false不保留
      red: isRed,
      green: !isRed,
    }"
  >
    hello css
  </p>
  <p :class="[isRed ? 'red' : 'green']">hello css</p>
  <p :style="{ color: isRed ? 'red' : 'green' }">hello css</p>
  <p class="text">hello css</p>
  <button @click="isRed = !isRed">切换</button>

  <div class="container">
    <Child />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      isRed: true,
    };
  },
  computed: {
    color() {
      return this.isRed ? "red" : "green";
    },
  },
});
</script>

<style scoped>
/* 
  scoped 
    1. 让样式只对当前组件生效
    2. 自动剔除没有使用的样式

    原理：
      会给当前组件所有元素添加一个自定义属性 data-v-xxx
      会给当前组件所有样式添加一个额外属性选择器 [data-v-xxx]
*/
.title {
  color: yellowgreen;
}
.red {
  color: red;
}
.green {
  color: green;
}

.text {
  /* vue3提供的css动态绑定数据语法 */
  color: v-bind(color);
}
/* 
  深度选择器 
    父组件操作后代组件的样式
*/
.container :deep(.content) {
  font-size: 30px;
}
</style>

<style>
/* 
  可以写多个style标签 
    加上scoped让样式只对当前组件生效
    不加scoped，是全局样式，对所有组件生效
*/
/* 父组件修改子组件样式 */
.content {
  color: red;
}
</style>
